<template>
	<view class="app-public-register" :style="[AppSkinVar]">
		<view class="welcome e-font-56">{{ toI18('注册') }}</view>
		<view class="tab-view e-flex" v-if="registerType.length > 1">
			<view class="e-flex-1 e-rela e-flex e-flex-xy-center e-font-32 c-666"
				:class="{'c-333 fw-600': tabIndex === 1}" @tap="tabIndex = 1">
				{{toI18('手机')}}
				<view class="tab-line" v-if="tabIndex === 1">

				</view>
			</view>
			<view class="e-flex-1 e-rela e-flex e-flex-xy-center e-font-32 c-666"
				:class="{'c-333 fw-600': tabIndex === 2}" @tap="tabIndex = 2">
				{{toI18('邮箱')}}
				<view class="tab-line" v-if="tabIndex === 2">

				</view>
			</view>
		</view>
		<view class="item e-flex  e-m-b-40" v-if="phoneInputShow">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/phone.png"></image>
			<view class="e-flex" v-if="countryAreaList && countryAreaList.length"
				@tap="$goTo('/pages/public/account/countryArea')">
				<image v-if="countryArea.logo" class="img-36 e-m-r-6" :src="countryArea.logo" mode=""></image>
				<text class="" v-if="countryArea">+{{countryArea.countryArea}}</text>
				<image class="img-16 e-m-r-10 e-m-l-10" :src="$staticPath('black-arrow.png')" mode=""></image>
			</view>
			<e-input type="number" v-model="formData.login" border="none" :placeholder="toI18('请输入您的手机号')" />
		</view>
		<view class="item e-flex  e-m-b-40" v-if="emailInputShow">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/phone.png"></image>
			<e-input type="email" v-model="formData.login" border="none" :placeholder="toI18('请输入您的邮箱')" />
		</view>
		<view class="item e-flex  e-m-b-40" v-if="hasInvitation">
			<image class="img-36 e-m-r-30" src="/pages/public/static/public/invitation.png"></image>
			<e-input :disabled="disabledSlat" v-model="salt" border="none" :placeholder="toI18('请输入您的邀请码')" />
		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="/pages/public/static/public/shield.png"></image>
			<e-input v-model="formData.validCode" border="none" :placeholder="toI18('请输入验证码')" />
			<e-code-button ref="eCodeRef"  :start-text="toI18('获取验证码')"
				:change-text="toI18('X秒重新获取')" :end-text="toI18('重新获取')" size="small" type="primary" shape="circle"
				 @click="getCode"></e-code-button>
		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="/pages/public/static/public/password.png"></image>
			<e-input v-model="formData.onePassword" border="none" :placeholder="toI18('6-12位字母与数字组合')"
				passwordIconShow type="password" />

		</view>
		<view class="item e-flex  e-m-b-40">
			<image class="img-36  e-m-r-30" src="/pages/public/static/public/password.png"></image>
			<e-input v-model="formData.twoPassword" border="none" :placeholder="toI18('请输入密码')" passwordIconShow
				type="password" />

		</view>
		<view class="e-p-t-8 e-p-b-40">
			<view class="app-public-register__tips e-flex" @tap="isAgree = !isAgree" v-if="agreeShow||privacyShow">
				<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary" @tap.stop="isAgree = !isAgree" />
				<template v-if="$isEnglishVersion">
					<text class="keep-all e-m-r-10">{{ $t('public.我已阅读并同意') }}</text>
					<navigator class="c-primary keep-all e-m-r-10" url="/pages/public/txt?id=14" v-if="agreeShow"
						@tap.stop>{{ $t('public.登录协议') }}</navigator>
					<text v-if="privacyShow">{{ $t('public.与') }}</text>
				</template>
				<template v-else>
					<text class="keep-all">{{ $t('public.我已阅读并同意') }}</text>
					<navigator class="c-primary keep-all" url="/pages/public/txt?id=14" v-if="agreeShow" @tap.stop>
						{{ $t('public.登录协议') }}</navigator>
					<template v-if="privacyShow">
						<text>{{ $t('public.与') }}</text>
						<navigator class="c-primary keep-all" url="/pages/public/txt?id=15" @tap.stop>
							{{ $t('public.隐私权政策') }}</navigator>
					</template>
				</template>
		
			</view>
			<view class="e-p-l-50" v-if="$isEnglishVersion && privacyShow">
				<navigator class="c-primary keep-all" url="/pages/public/txt?id=15">{{ $t('public.隐私权政策') }}</navigator>
			</view>
		</view>
		<button class="sub-btn bg-primary" :style="[boxShadowColor]" :class="{ 'is-ok': isOk }"
			@tap="submit">{{ toI18('注册并登录') }}</button>

		
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import { postRegister, postLogin, postRegisterSms } from '@/common/request/api'
	// import type {CountryAreaItem} from '@/common/request/api'
	import {
		useI18n,
		useCurrentInstance,
		useLogin
	} from '@/common/hooks'
	import { useBasics,useUser } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
	import {throttle} from '@/common/utils'

	const props = defineProps<{
		salt ?: string
	}>()

	const ctx = useCurrentInstance()
	const {login} = useLogin()
	const toI18 = useI18n('public')
	const userStore = useUser()
	const { countryArea, countryAreaList } = storeToRefs(userStore)
	const { agreement, registerModel, hasInvitation } = storeToRefs(useBasics())


	const isAgree = ref(false)
	

	const formData = reactive({
		login: '',
		validCode: '',
		onePassword: '',
		twoPassword: '',
	})
	
	
	const isOk = computed(() => {
		return Object.values(formData).some(item => !item)
	})
	const salt = ref(props.salt || uni.getStorageSync('userSalt') || '')
	const disabledSlat = ref(!!salt.value)
	// const showPicker = ref(false)
	
	// const handleGetContry = (arr:{value:CountryAreaItem[]}) => {
	// 	userStore.setCountryArea( arr.value[0])
	// 	showPicker.value = false
	// }

	const tabIndex = ref(1)

	const privacyShow = computed(() => {
		let data = agreement.value.find(item => item.id == 15)
		return data?.status === 1
	})
	const agreeShow = computed(() => {
		let data = agreement.value.find(item => item.id == 13)
		return data?.status === 1
	})
	const registerType = computed(() => {

		if (registerModel.value.length === 2) {
			return [1, 2]
		} else {
			if (registerModel.value.find(item => item === 'phone')) {
				return [1]
			} else {
				return [2]
			}
		}

	})
	
	const phoneInputShow = computed(() => {
		
			if(registerType.value.length > 1){
				return registerType.value.includes(1) && tabIndex.value === 1
			}
			return registerType.value.includes(1)
		
	})
	const emailInputShow = computed(() => {
		if(registerType.value.length > 1){
			return registerType.value.includes(2) && tabIndex.value === 2
		}
		return registerType.value.includes(2)
	})

	const registerTypeText = computed(() => {
		if (registerModel.value.length === 2) {
			return '请输入您的手机号/邮箱'
		} else {
			if (registerModel.value.find(item => item === 'phone')) {
				return '请输入您的手机号'
			} else {
				return '请输入您的邮箱'
			}
		}
	})
	const boxShadowColor = computed(() => {
		return {
			boxShadow: `0 12rpx 24rpx 0 ${ctx.AppSkin.primary.replace('1)', '0.3)')}`
		}
	})

	const eCodeRef = ref<CodeInstance>(null)

	const getCode = () => {
		if (!formData.login) {
			ctx.$toastApp(toI18(registerTypeText.value))
			return
		}
		postRegisterSms(formData.login,tabIndex.value ? { countryId: countryArea.value.id }:undefined).then(res => {
			eCodeRef.value?.start()
		})
	}

	const submit = throttle(function () {
		if (isOk.value) return
		if (agreeShow.value || privacyShow.value) {
			if (!isAgree.value) {
				ctx.$toastApp(toI18('请先阅读并同意用户协议'))
				return
			}
		}


		if (formData.twoPassword !== formData.onePassword) {
			ctx.$toastApp(toI18('两次密码不一致'))
			return
		}

		let params = {
			userName: formData.login,
			password: formData.onePassword,
			validCode: formData.validCode,
			countryId: countryArea.value.id,
			salt: salt.value
		}
		postRegister(params).then(res => {
			postLogin({
				username: formData.login,
				password: formData.onePassword,
				areaCode:countryArea.value.countryArea
			}).then(res => {
				login(res.data.access_token)
				ctx.$back(2)
				uni.removeStorageSync('userSalt')
			})
			ctx.$toastApp(res.msg)
		})
	},1000)
	
	

	userStore.getCountryAreaList()
	
	

</script>

<style>
	page {
		background-color: #ffffff;
		padding: 0 72rpx;
		box-sizing: border-box;
	}
</style>

<style lang="scss" scoped>
	:deep(.e-button--small){
		padding: 0 40rpx;
	}
	@include appBem_b(register){
		@include appBem_e(tips) {
			width: 600rpx;
			color: #a7aab3;
			margin: 0 auto;
		
			navigator {
				text-decoration: underline;
			}
		}
	}
	.welcome {
		width: 610rpx;
		margin: auto;
		padding: 80rpx 0;
		font-weight: 600;
	}

	.item {
		background: #F7F7F7;
		border-radius: 50rpx;
		height: 90rpx;
		padding: 0 20rpx 0 40rpx;
	}

	.code-btn {
		height: 60rpx;
		line-height: 60rpx;
		letter-spacing: 2rpx;
		border-radius: 30px;
	}

	.sub-btn {
		width: 600rpx;
		height: 88rpx;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: 500;
		letter-spacing: 2rpx;
		border-radius: 44rpx;
		margin: 0 auto;
	}

	.tips-box {
		color: #a7aab3;
		margin-top: 30rpx;

		navigator {
			text-decoration: underline;
		}
	}

	.tab-view {
		width: 100%;
		padding: 0 70rpx 70rpx;

		.tab-line {
			position: absolute;
			left: 50%;
			bottom: -20rpx;
			transform: translateX(-50%);
			width: 54rpx;
			height: 8rpx;
			background-color: #F5222D;
			border-radius: 8rpx;
		}
	}
</style>